<template>
  <div class="broken">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div class="broken_view" v-else>
      <div class="switch">
        <div class="checkTemper">
          <div
            v-for="item in cameraList"
            :key="item"
            class="button"
            :class="number == item ? 'active' : null"
            @click="handlerTemper(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <div class="broken-title">
          <img src="@/assets/images/hk.png" alt="" />
          相机监控平台
        </div>
        <div class="company-logo">
          <div class="company-name" @click="$router.back()">
            <div class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</div>
          </div>
        </div>
      </div>
      <div class="ty-line">
        <dv-decoration-8
          style="width: 30%; height: 100px"
          :color="['#00c2ff', '#00c2ff']"
        />
        <dv-decoration-10 style="width: 70%; height: 5px" />
      </div>
      <div class="broken-box">
        <dv-border-box-7 style="width: 70%">
          <div class="broken-big-glass">
            <div
              class="broken-min-glass"
              v-if="allCameraGlass && allCameraGlass.id != null"
              :style="{
                width: allCameraGlass.furInWidth * (1293 / 2000) + 'px',
                height: allCameraGlass.furInHeight * (877 / 2000) + 'px',
              }"
            >
              {{ allCameraGlass.furInWidth + "*" + allCameraGlass.furInHeight }}
              <br />
              <div class="rule">
                {{
                  allCameraGlass.furInWidth > allCameraGlass.furInHeight
                    ? "W"
                    : "H"
                }}
              </div>
            </div>
            <div class="camera-status">
              <div
                class="light"
                :style="{ backgroundColor: colorList[cameraStatus] }"
              ></div>
              {{ cameraStatus | filterStatus }}
            </div>
          </div></dv-border-box-7
        >
        <div class="broken_content">
          <div class="company-logo">
            <img :src="company_logo" alt="" @click="$router.back()" />
            <div class="company-name" @click="$router.back()">
              {{ company_name }}
            </div>
            <dv-decoration-1 style="width: 200px; height: 40px" />
          </div>
          <dv-border-box-10>
            <div class="inner_box" style="width: 100%; height: 100%">
              <div class="glass_info">
                <div class="text">玻璃信息</div>
                <dv-decoration-5 style="width: 300px; height: 40px" :dur="3" />
              </div>
              <div
                class="line-list"
                v-if="allCameraGlass && allCameraGlass.id != null"
              >
                <div class="line-item">
                  <div class="item">
                    ID<span>{{ allCameraGlass.id }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    OPTID<span>{{ allCameraGlass.orderid }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    工作单ID<span>{{ allCameraGlass.workId }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    流程卡号<span>{{ allCameraGlass.optGlass.cardCode }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    客户名<span>{{ allCameraGlass.clientName }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    尺寸<span
                      >{{ allCameraGlass.width }}mm*{{
                        allCameraGlass.height
                      }}mm</span
                    >
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    厚度<span>{{ allCameraGlass.thick }}mm</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    识别码<span>{{ allCameraGlass.optCodeContext }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    品种<span>{{ allCameraGlass.type }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    卧理机层数<span>{{
                      allCameraGlass.grid * 1 == 0
                        ? "正在计算..."
                        : "第" + allCameraGlass.grid * 1 + "层"
                    }}</span>
                  </div>
                </div>
                <div class="line-item">
                  <div class="item">
                    扫码时间<span>{{ allCameraGlass.createTime }}</span>
                  </div>
                </div>
              </div>
              <div class="white-text" v-else>相机机空闲状态</div>
            </div>
          </dv-border-box-10>
        </div>
      </div>
      <div class="bottom-tip">
        W: 横向为长边 H: 纵向为长边 <br />
        卧理机层数:玻璃进入卧理机的第几层内(共9层)
      </div>
      <el-dialog
        title="⚠警告"
        :visible.sync="dialogVisible"
        width="45%"
        top="25vh"
        center
      >
        <div class="tipText">下架玻璃,请勿上线!</div>
      </el-dialog>
      <el-dialog
        title="⚠警告"
        :visible.sync="dialogVisibleDobule"
        width="45%"
        top="25vh"
        center
      >
        <div class="doubleTips">
          玻璃已在线上!可能存在重复打码,如需继续,点击下方异常按钮将玻璃异常后,再继续扫码。
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogVisibleDobule = false" plain
            >关 闭</el-button
          >
          <el-button type="warning" plain @click="handlerErrorGlass"
            >异常</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/formateTime.js";
import { mapState } from "vuex";
import { cameraList } from "@/views/production/device/Config/camera.js";
import { abnormal } from "@/api/production/quartz";
import plc from "../fullview/config/plcLocation";
export default {
  data() {
    return {
      colorList: ["#fac427", "#269745", "#e64032"],
      radio: 1,
      versionNumber: 1,
      glassList: [],
      showGlass: null,
      timer: null,
      timing: null,
      cameraList,
      isShow: false,
      cameraStatus: 0,
      number: 1,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      loading: true,
      dialogVisible: false,
      places: [
        ...plc.waitGlassRecumentLine,
        ...plc.waitGlassRecumentLine2,
        ...plc.waitGlassRecumentLine3,
      ],
      dialogVisibleDobule: false,
    };
  },
  methods: {
    handlerErrorGlass() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          abnormal(this.allCameraGlass.id, 2).then((res) => {
            this.$modal.msgSuccess(res.msg);
            this.updatePageList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    handlerTemper(e) {
      this.number = e;
      this.$store.dispatch("AllCameraScanGlass");
    },
    check() {
      if (
        this.allCameraGlass.createTime != null &&
        Date.now() - new Date(this.allCameraGlass.createTime).getTime() <
          10 * 1000
      ) {
        if (this.allCameraGlass.optGlass != null) {
          this.dialogVisible =
            this.allCameraGlass.optGlass.downState == "下架" ? true : false;
        }
        if (!this.places.includes(this.allCameraGlass.place * 1)) {
          // this.dialogVisibleDobule = ture;
        }
        this.isShow = true;
        this.cameraStatus = 1;
      } else {
        this.isShow = false;
        this.cameraStatus = 0;
      }
    },
  },
  computed: {
    ...mapState({
      allCameraGlass(state) {
        return state.deviceStatus.allCameraList.filter(
          (item) => item.cameraId == this.number
        )[0];
      },
    }),
  },
  created() {
    this.timeFn();
    this.cancelLoading();
    this.$store.dispatch("AllCameraScanGlass");
    this.timer = setInterval(async () => {
      await this.$store.dispatch("AllCameraScanGlass");
      this.check();
    }, 2000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  filters: {
    filterStatus(e) {
      let arr = ["空闲", "成功", "失败"];
      return arr[e];
    },
  },
};
</script>

<style lang="scss" scoped>
.tipText {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  letter-spacing: 10px;
}
.doubleTips {
  width: 100%;
  height: 400px;
  padding-top: 70px;
  font-size: 40px;
  letter-spacing: 7px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
}
::v-deep .el-dialog__body {
  padding-top: 0px;
  color: #fff;
  text-align: center;
}
::v-deep .el-dialog {
  background-color: rgba(245, 218, 177, 0.1);
  border: 2px solid #f5dab1;
  .el-dialog__title {
    color: #f0a83d;
    font-size: 30px;
    letter-spacing: 20px;
  }
}
.broken {
  width: 100%;
  height: 100%;
  display: flex;
  background-image: linear-gradient(to bottom, #20427a, #10152b);
  color: #fff;

  .broken_view {
    position: relative;
    padding: 10px 25px;
    height: 100%;
    width: 100%;
    // border-right: 1px dashed #e6e6e6;
    display: flex;
    flex-direction: column;
    .switch {
      display: flex;
      align-items: center;
      .checkTemper {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 30px;
        margin-left: 40px;
        z-index: 2;
        .button {
          width: 60px;
          height: 50px;
          transform: skewX(30deg);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #17b9fc;
          border: 1px solid #17b9fc;
        }

        .button > div {
          transform: skewX(-30deg);
          font-size: 24px;
          font-weight: bold;
        }
        .active {
          background-image: linear-gradient(to top, #1890ff 0%, #16e2ff 100%);
          color: #fff;
        }
      }
      .broken-title {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 20px;
        color: transparent;
        -webkit-background-clip: text;
        background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
        img {
          height: 55px;
          width: 70px;
          transform: translateY(5px);
        }
      }
      .company-logo {
        min-width: 20%;
        min-height: 15%;
        padding: 2px 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: auto;
        img {
          width: 50px;
          height: 50px;
          margin-right: 20px;
          margin-left: 50px;
        }
        .company-name {
          font-size: 24px;
          font-weight: bold;
          display: flex;
          align-items: flex-end;
          letter-spacing: 2px;
        }
      }
      .name {
        padding-left: 5px;
        font-weight: bold;
        font-size: 20px;
        margin-right: 20px;
        transform: translateY(-3px);
        cursor: pointer;
      }
      .back {
        // border-right: 1px solid #e6e6e6;
        width: 55px;
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
      }
      .back:hover {
        text-decoration: underline;
      }
    }
    .ty-line {
      display: flex;
      .dv-decoration-8 {
        transform: translateY(-47.5%);
      }
    }
    .broken-box {
      flex: 1;
      display: flex;
      padding: 0px 0px 10px 0px;
      transform: translateY(-40px);
      .broken-big-glass {
        position: relative;
        height: 100%;
        width: 100%;
        // background-color: #deb888;
        display: flex;
        align-items: center;
        justify-content: center;
        .camera-status {
          width: 100px;
          height: 40px;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          font-weight: bold;
          right: 0;
          top: 0;
          .light {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            margin-right: 10px;
            animation: pulsate 5s ease-out;
          }
        }
        .broken-min-glass {
          display: flex;
          position: relative;
          justify-content: center;
          align-items: center;
          font-size: 40px;
          font-weight: bold;
          background-color: #17b9fc;
          border: 1px solid #000002;
          .rule {
            position: absolute;
            left: 5px;
            top: 0;
          }
        }
      }
      .broken_content {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        .inner_box {
          display: flex;
          flex-direction: column;
        }
        .dv-border-box-10 {
          flex: 1;
        }
        .company-logo {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          cursor: pointer;
          img {
            width: 40px;
            height: 40px;
            margin-right: 20px;
          }
          .company-name {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: flex-end;
            letter-spacing: 5px;
          }
          .dv-decoration-1 {
            margin-left: auto;
          }
        }
        .progress {
          padding: 5px 10px;
          flex: 1;
          display: flex;
          flex-direction: column;
          .progress-name {
            height: 40%;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            transform: translateY(20px);
          }
          .progress-circle {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .white-text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          font-weight: bold;
          letter-spacing: 5px;
          color: #dee1e6;
        }
        .glass_info {
          height: 12%;
          font-size: 24px;
          font-weight: bold;
          display: flex;
          align-items: center;
          flex-direction: column;
          .text {
            transform: translateY(10px);
            letter-spacing: 5px;
            color: transparent;
            -webkit-background-clip: text;
            background-image: linear-gradient(
              to right,
              #007aff,
              #00dfff,
              #007aff
            );
          }
        }
        .line-list {
          padding: 0 20px 0 10px;
          flex: 1;
          display: flex;
          flex-direction: column;
          .line-item {
            font-size: 28px;
            font-weight: bold;
            padding-left: 10px;
            margin-bottom: 20px;
            .item {
              display: flex;
              span {
                margin-left: auto;
                font-size: 26px;
                display: flex;
                align-items: center;
              }
            }
          }
        }
        .tips {
          flex: 1;
          display: flex;
          flex-direction: column;
          border-bottom: 1px solid #e6e6e6;
          .top_sub {
            height: 40px;
            font-size: 24px;
            padding: 10px;
          }
          .descript {
            flex: 1;
            padding: 10px;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
          }
        }
      }
    }
    .bottom-tip {
      position: absolute;
      width: 90%;
      left: 25px;
      bottom: 5px;
      height: 50px;
    }
  }
}
::v-deep .el-progress__text {
  display: flex;
  flex-direction: column;
}
</style>
